/* eslint-disable react-refresh/only-export-components */
import Header from './components/Header'
// 1. 导入接口
import { getTicketApi } from '../../api/ticket'
import DateTop from '../query/components/Date.jsx'
import TicketInfo from './components/TicketInfo.jsx'
import Seat from './components/Seat.jsx'
import styles from './css/ticket.module.css'

function Ticket() {
  return (
    <div className={styles.box}>
      <Header />
      <DateTop />

      {/* 车票信息 */}
      <TicketInfo />

      <Seat />
    </div>
  )
}

export default Ticket

export const loader = async ({ request, params }) => {
  // 2. 调用接口，拿到接口返回的数据
  // 2.1 先准备接口需要用到的数据，再去调用接口
  const url = new URL(request.url)
  const obj = Object.fromEntries(url.searchParams)
  // 调用接口
  const { data: res } = await getTicketApi({
    id: params.id,
    start: obj.start,
    end: obj.end
  })
  console.log(res)
  // 3. 把接口返回的数据，挂载到 return 的这个对象身上
  return { info: res }
}
